<template>
  <!-- 小工具箱 -->
  <el-drawer
    v-model="widgetShow"
    modal-class="widget"
    modal="false"
    title="工具箱"
    :with-header="false"
    :direction="'ltr'"
    :before-close="drawBeforeClose">
    <div class="drawerTitle">
      <i class="el-icon-more"></i>
    </div>
    <div class="drawerTime">
      <strong>{{drawerTime}}</strong>
    </div>
    <div class="drawerContent">
      123456
    </div>
  </el-drawer>
</template>
<script>
import { ref, watchEffect, watch } from 'vue'
import {useStore} from 'vuex'
export default {
  setup(){
    const store = useStore()
    const widgetShow = ref(false)
    let drawerTime = ref(0)
    // 小工具时间处理
    let currentTime = null
    const timing=()=>{
      currentTime+=1000
      let hours = new Date(currentTime).getHours(),minutes = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`,seconds = new Date(currentTime).getSeconds()>9?new Date(currentTime).getSeconds():`0${new Date(currentTime).getSeconds()}`
      drawerTime.value = `${hours} : ${minutes} : ${seconds}`
    }
    let timer = null
    //及时间处理
    watchEffect(()=>{
      if(store.state.taskbar.widgetShow){
        currentTime = new Date().getTime()
        let hours = new Date(currentTime).getHours(),minutes = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`,seconds = new Date(currentTime).getSeconds()>9?new Date(currentTime).getSeconds():`0${new Date(currentTime).getSeconds()}`
        drawerTime.value = `${hours} : ${minutes} : ${seconds}`
        timer = setInterval(timing,1000)
      }else{
        clearInterval(timer)
      }
    })
    //小工具显示 / 隐藏
    watch(()=>store.state.taskbar.widgetShow,()=>{
      widgetShow.value = store.state.taskbar.widgetShow
    })

    const drawBeforeClose= ()=>{
      store.dispatch('taskbar/changeWidgetShow',false)
    }
    return{
      drawerTime,
      widgetShow,
      drawBeforeClose
    }
  }
}
</script>
<style lang="scss">
.drawerTitle{
  width: 96%;
  padding-top: 18px;
  text-align: right;
}
.drawerTime{
  margin-bottom: 24px;
  strong{
    color: #222;
    font-size: 24px;
  }
}
.drawerContent{
  width: 80%;
  margin: auto;
}
</style>